<template>
    <div class="page-hire-order">
        <div class="tab-header">
            <van-tabs v-model="active" @click="getDataList">
                <van-tab v-for="item in tabs" :key="item.status" :title="item.title"></van-tab>
            </van-tabs>
        </div>
        <div class="tab-panel">
            <ul class="order-list" v-if="dataSource.length > 0">
                <li class="order-item" v-for="item in dataSource" :key="item.id" @click="readDetail(item)">
                    <div class="hd van-hairline--bottom">
                        申请单订单编号：{{item.id}}
                        <span class="status">
                            {{item.orderState | filterOrderStatus}}
                        </span>
                    </div>
                    <div class="bd">
                        <div class="img">
                            <img :src="item.designerHead" alt="">
                        </div>
                        <div class="txt">
                            <div class="name">
                                {{item.designerName}}
                                <time>{{item.createTime}}</time>
                            </div>
                            <div class="desc">
                                复古、极客、艺术公寓
                            </div>
                        </div>
                    </div>
                    <div class="ft">
                        诚意金：<strong class="price">￥{{item.earnestMoney}}</strong>
                    </div>
                </li>
            </ul>

            <div v-else style="text-align:center; padding: 100px 0; color: #999;">
                暂无订单
            </div>
        </div>
    </div>
</template>

<script>
import {cusOrderList} from '../../api/demand'
export default {
    name: 'hireOrder',
    data(){
        return {
            tabs: [{
                title: '全部',
                status: 'ALL'
            },{
                title: '进行中',
                status: 'ING'
            },{
                title: '已完成',
                status: 'END'
            }],
            active: 0,
            dataSource: [],
        }
    },
    methods: {
        readDetail(item){
            this.$router.push({name: 'orderDetail', params: {id: item.id}})
            localStorage.userOrderDetail = JSON.stringify(item)
        },

        getDataList(){
            cusOrderList(this.tabs[this.active].status).then(rsp => {
                if(rsp.code === 200){
                    this.dataSource = rsp.data
                }
            })
        },

        // onTabClick(index){
        //     console.log(this.tabs[index].status)
        // }
    },
    created(){
        this.getDataList()
    }
}
</script>

<style lang="less">
.page-hire-order{
    .tab-header{
        .van-tab--active{
            color: @green;
        }
        .van-tabs__line{
            background-color: @green;
        }
    }
    .tab-panel{
        .order-list{
            .order-item{
                padding: 0 10px 10px;
                margin: 10px auto;
                background-color: #fff;
                .hd{
                    line-height: 40px;
                    font-size: 12px;
                    .status{
                        float: right;
                    }
                }
                .bd{
                    display: flex;
                    align-items: center;
                    padding: 10px 0;
                    .img{
                        width: 60px;
                        height: 60px;
                        margin-right: 10px;
                        border-radius: 50%;
                        overflow: hidden;
                    }
                    .txt{
                        flex: 1;
                        min-width: 0;
                        .name{
                            line-height: 30px;
                            time{
                                float: right;
                                font-size: 12px;
                                color: #707070;
                            }
                        }
                        .desc{
                            font-size: 14px;
                            color: #707070;
                            line-height: 1.75;
                        }
                    }
                }
                .ft{
                    text-align: right;
                    font-size: 14px;
                    color: #707070;
                    .price{
                        font-size: 140%;
                        color: #212121;
                    }
                }
            }
        }
    }
}
</style>


